<template>
  <div class="maps">
    <baidu-map
        class="map"
        ak="2PLsJxjb9mdlvuuBVx3N4gPKyZDgt8rK"
        v="3.0"
        type="API"
        :center="center"
        :zoom="zoom"
        scroll-wheel-zoom
    >
      <bm-marker :position="center" :dragging="false"></bm-marker>
    </baidu-map>
    <div class="search-box">
      <input type="text" v-model="searchQuery" placeholder="搜索地点" />
      <button @click="searchLocation">搜索</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { BaiduMap, BmMarker } from 'vue-baidu-map-3x'

const center = ref({ lng: 113.344510, lat: 23.193400 })
const searchQuery = ref('')
const zoom = ref(18)

function searchLocation() {
  const BMap = window.BMap
  const geocoder = new BMap.Geocoder()

  if (searchQuery.value.trim() === '') {
    alert('请输入搜索内容')
    return
  }

  // 处理城市和搜索逻辑
  geocoder.getPoint(searchQuery.value, function (point) {
    if (point) {
      center.value = { lng: point.lng, lat: point.lat }
      zoom.value = 15 // 可选：设置缩放级别
    } else {
      alert('未找到该地址，请重试')
    }
  }, '广州') // 确保默认城市设置为广州
}
</script>

<style>
.maps {
  width: 59vw;
  height: 70vh;
  position: relative;
}
.map {
  width: 59vw;
  height: 70vh;
}
.search-box {
  position: absolute;
  top: 0px;

  background-color: white;
  padding: 5px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.search-box input {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 3px;
  width: 13vw;
  height: 2vw;
}
.search-box button {
  border: none;
  background-color: #92c2f8;
  color: white;
  padding: 5px 10px;
  margin-left: 5px;
  border-radius: 3px;
  cursor: pointer;
}
.search-box button:hover {
  background-color: #7e8893;
}
</style>
